import ProTable from '@ant-design/pro-table';
import {Modal,Image} from "antd";
import {receivingRecord} from "@/services/ant-design-pro/marketing";


export default (props) => {
  const {isCollectionVisit,collectionCancel,id} = props
  const columns = [
    {
      dataIndex: 'nickname',
      title: '成员名称',
      valueType: 'name',
      width: 150,
      key: 'name',
      align: 'center',

    },
    {
      title: '图片',
      dataIndex: 'image',
      key: 'image',
      valueType: 'image',
      width: 150,
      align: 'center',
      render:(_,record)=>[
        <Image
          width={50}
          src={record.avatar_url}
        />
      ]
    },
    {
      title: '领取时间',
      dataIndex: 'CouponIssueUser',
      key: 'status',
      width: 200,
      valueType: 'status',
      align: 'center'
    },
  ]

  return (
    <div >
      <Modal
        title="领取记录"
        visible={isCollectionVisit}
        onCancel={collectionCancel}
        footer={false}
        width={800}
      >
        <ProTable
          columns={columns}
          // request={async ()=>await receivingRecord(id,)}
          request={async ()=>{
            const {data,meta} =await receivingRecord(id)
            return{
              data,
              success:true,
              total:meta.pagination.total
            }
          }}
          toolBarRender={false}
          search={false}
          rowKey="id"
          headerTitle="领取记录"
        />
      </Modal>
    </div>
  )
};
